<html>
    <head>
      <title>{{ title }} - {{ config.SITE_TITLE }}</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
      {% if config.THEME_CONF.get('use_theme_dark', False) %}
        <link rel="stylesheet" href="{{ url_for('static', filename='main_dark.css') }}">
      {% endif %}
      {% if config.THEME_CONF.get('use_custom_css', False) %}
        <link rel="stylesheet" href="/static/custom.css">
      {% endif %}

    <link rel="icon" href="{{ url_for('static', filename='archivy.svg')}}" type="image/svg+xml">
    </head>
    <body>

        {% set path = [] %}
        {% set i = namespace(value=0) %}
        {% macro draw_dir(dir, depth) -%}
            {% set i.value = i.value + 1 %}
            {% if depth %}
                {% do path.append(dir.name) %}
            {% endif %}
            <div id="cont-{{i.value}}" class="folder-cont">
                <div class="folder-title d-flex">
                    <button class="expand-btn" onclick="createInteractive(this, {{i.value}});">
                        <svg class="octicon closed" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"><path fill-rule="evenodd" d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"></path></svg>
                        <svg class="octicon open" style="display: none;" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"></path></svg>
                    </button>
          <a href="/?path={{ SEP.join(path) + SEP }}"><h3>
                        {{ dir.name }}
            </h3></a>
                </div>
                {% if dir.child_files | length %}
                {% endif %}

                <ul class="items-{{i.value}}">
                    {% for dataobj in dir.child_files | sort(attribute="title") %}
                        <li class="d-flex">
                            <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.427 4.427l3.396 3.396a.25.25 0 010 .354l-3.396 3.396A.25.25 0 016 11.396V4.604a.25.25 0 01.427-.177z"></path></svg>
                            <a href="/dataobj/{{ dataobj["id"] }}">
                                {{ dataobj["title"] }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
                {% for child_dir in dir.child_dirs.values() | sort(attribute="name") %}
                    {{ draw_dir(child_dir, depth + 1) }}
                {% endfor %}
            </div>
            {% if depth %}
                {% do path.pop() %}
            {% endif %}
        {%- endmacro %}

        <div class="Header">
            <div class="Header-item full">
                <a class="Header-link" href="/">
                    <img src="/static/logo.png" alt="archivy logo" width="35" height="35">
                    <h3>{{ config.SITE_TITLE }}</h3>
                </a>
                <p>&nbsp; v{{ version }}</p>
            </div>

            {% if current_user.is_authenticated and not view_only %}
    {% if config["RG_INSTALLED"] %}
        <a href="/tags" class="Header-link Header-item">
            <h3>Tags</h3>
        </a>
    {% endif %}
                <a href="/plugins" class="Header-link Header-item">
                    <h3>Plugins</h3>
                </a>
                <a class="Header-link Header-item" href="/bookmarklet">
                    <h3>Bookmarklet</h3>
                </a>
                <a href="/user/edit" class="Header-item">
                    <svg class="octicon" color="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="30" height="30"><path fill-rule="evenodd" d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"></path></svg>
                </a>

    <a href="/config" alt="settings">
        <svg style="margin: 5px" width="25" height="25" fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.429 1.525a6.593 6.593 0 011.142 0c.036.003.108.036.137.146l.289 1.105c.147.56.55.967.997 1.189.174.086.341.183.501.29.417.278.97.423 1.53.27l1.102-.303c.11-.03.175.016.195.046.219.31.41.641.573.989.014.031.022.11-.059.19l-.815.806c-.411.406-.562.957-.53 1.456a4.588 4.588 0 010 .582c-.032.499.119 1.05.53 1.456l.815.806c.08.08.073.159.059.19a6.494 6.494 0 01-.573.99c-.02.029-.086.074-.195.045l-1.103-.303c-.559-.153-1.112-.008-1.529.27-.16.107-.327.204-.5.29-.449.222-.851.628-.998 1.189l-.289 1.105c-.029.11-.101.143-.137.146a6.613 6.613 0 01-1.142 0c-.036-.003-.108-.037-.137-.146l-.289-1.105c-.147-.56-.55-.967-.997-1.189a4.502 4.502 0 01-.501-.29c-.417-.278-.97-.423-1.53-.27l-1.102.303c-.11.03-.175-.016-.195-.046a6.492 6.492 0 01-.573-.989c-.014-.031-.022-.11.059-.19l.815-.806c.411-.406.562-.957.53-1.456a4.587 4.587 0 010-.582c.032-.499-.119-1.05-.53-1.456l-.815-.806c-.08-.08-.073-.159-.059-.19a6.44 6.44 0 01.573-.99c.02-.029.086-.075.195-.045l1.103.303c.559.153 1.112.008 1.529-.27.16-.107.327-.204.5-.29.449-.222.851-.628.998-1.189l.289-1.105c.029-.11.101-.143.137-.146zM8 0c-.236 0-.47.01-.701.03-.743.065-1.29.615-1.458 1.261l-.29 1.106c-.017.066-.078.158-.211.224a5.994 5.994 0 00-.668.386c-.123.082-.233.09-.3.071L3.27 2.776c-.644-.177-1.392.02-1.82.63a7.977 7.977 0 00-.704 1.217c-.315.675-.111 1.422.363 1.891l.815.806c.05.048.098.147.088.294a6.084 6.084 0 000 .772c.01.147-.038.246-.088.294l-.815.806c-.474.469-.678 1.216-.363 1.891.2.428.436.835.704 1.218.428.609 1.176.806 1.82.63l1.103-.303c.066-.019.176-.011.299.071.213.143.436.272.668.386.133.066.194.158.212.224l.289 1.106c.169.646.715 1.196 1.458 1.26a8.094 8.094 0 001.402 0c.743-.064 1.29-.614 1.458-1.26l.29-1.106c.017-.066.078-.158.211-.224a5.98 5.98 0 00.668-.386c.123-.082.233-.09.3-.071l1.102.302c.644.177 1.392-.02 1.82-.63.268-.382.505-.789.704-1.217.315-.675.111-1.422-.364-1.891l-.814-.806c-.05-.048-.098-.147-.088-.294a6.1 6.1 0 000-.772c-.01-.147.039-.246.088-.294l.814-.806c.475-.469.679-1.216.364-1.891a7.992 7.992 0 00-.704-1.218c-.428-.609-1.176-.806-1.82-.63l-1.103.303c-.066.019-.176.011-.299-.071a5.991 5.991 0 00-.668-.386c-.133-.066-.194-.158-.212-.224L10.16 1.29C9.99.645 9.444.095 8.701.031A8.094 8.094 0 008 0zm1.5 8a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM11 8a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
    </a>
            {% endif %}
        </div>
        <div id="page">
            {% if current_user.is_authenticated %}
                <div class="sidebar">
                    {{ draw_dir(dataobjs, 0) }}
                </div>
            {% endif %}

            <main class="content pt-3">
                {% with messages = get_flashed_messages(with_categories=True) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="flash mt-3 mb-3 flash-{{ category }}">{{ message }}</div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}

      {% if current_path is defined %}
          <div class="d-flex" id="dir-info">
          <!-- shows current path on navigation or on dataobjs -->
          <div id="current-path">

            <a href="/?path=">root</a></li>
            {% set split_path = current_path.strip(SEP).split(SEP) %}
            {% if split_path[0] != '' %}
              {% for i in range(split_path | length) %}
                <span> → </span>
                <a href="/?path={{SEP.join(split_path[0:i + 1])}}{{SEP}}">{{split_path[i]}}</a></li>
              {% endfor %}
            {% endif %}
          </div>
          {% if dir is defined %}
            <!-- show child file / dir counts on nav -->
            <p>{{dir.child_files | length}} file{{dir.child_files | length | pluralize()}}</p>
            <p>{{dir.child_dirs | length}} child director{{dir.child_dirs | length | pluralize("y", "ies")}}</p>
          {% endif %}
          </div>
      {% endif %}
      {% block content %}{% endblock %}
      </main>
    </div>

        <script>
          const SCRIPT_ROOT = {{ request.script_root|tojson|safe }} + "/api";
          let max_folder_id = document.querySelectorAll(".folder-cont").length;
          function createInteractive(btn, id)
          {
            // expand
            let parentDiv = btn.parentNode;
            let childNotes = document.querySelector(".items-" + id);
            // check if expanded
            let expanded = window.getComputedStyle(childNotes).getPropertyValue("display") === "block";
            let icons = btn.querySelectorAll("svg");
            if (!expanded) {
              childNotes.style.display = "block";
              icons[1].style.display = "block";
              icons[0].style.display = "none";
            }
            // collapse
            else {
              childNotes.style.display = "none";
              icons[0].style.display = "block";
              icons[1].style.display = "none";
            }

          }
        </script>
    </body>
</html>
